<template>
	<view class="root">
		<view class="header">
			<view class="top">
				<up-image width="122rpx" shape="circle" height="122rpx" style="border: 6rpx solid #fff; border-radius: 50%;"
					:src="config.http_host + userInfo.imageUrl" mode="scaleToFill" ></up-image>
				<view class="name">
					<text>{{userInfo.nickName || ''}}</text>
				</view>
			</view>
			<view class="main">
				<view class="row" style="margin-bottom: 56rpx;">
					<view class="item">
						<view class="title">
							<text>球镜(S)</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.sphericalLeft}}D</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.sphericalRight}}D</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="title">
							<text>柱镜(S)</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.cylindricalLeft}}D</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.cylindricalLeft}}D</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="title">
							<text>轴位(A)</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.axisLeft}}°</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.axisLeft}}°</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row">
					<view class="item">
						<view class="title">
							<text>裸眼视力</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.scVaLeft}}</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.scVaRight}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="title">
							<text>眼轴长度</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.axialLengthLeft}}</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.axialLengthRight}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="title">
							<text>角膜曲率</text>
						</view>
						<view class="info">
							<view class="colume">
								<view class="subtitle">
									<text>左眼</text>
								</view>
								<view class="num">
									<text>{{visionData.keratometryLeft}}D</text>
								</view>
							</view>
							<view class="colume">
								<view class="subtitle">
									<text>右眼</text>
								</view>
								<view class="num">
									<text>{{visionData.keratometryRight}}D</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="linkCard">
			<view class="item">
				<image src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode="scaleToFill" class="icon"></image>
				<view class="label">
					<text>专属管家</text>
				</view>
			</view>
			<view class="item">
				<image src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode="scaleToFill" class="icon"></image>
				<view class="label">
					<text>专属医生</text>
				</view>
			</view>
			<view class="item">
				<image src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960" mode="scaleToFill" class="icon"></image>
				<view class="label">
					<text>专属视训傅</text>
				</view>
			</view>
		</view> -->
		<view class="report">
			<view class="top">
				<view class="left">
					<view class="title">
						<text>每周报告</text>
					</view>
					<view class="tips">
						<text>这个星期也很棒哦！</text>
					</view>
				</view>
				<view class="right">
					<text class="time">{{timeFormat(sevenDaysAgo, 'yyyy-mm-dd')}}至{{timeFormat(now, 'yyyy-mm-dd')}}</text>
					<up-icon name="calendar-fill" color="#000000" size="33rpx"></up-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in report" :key="item.id" @click="jumpDetail(item.fileInfoId)">
					<view class="title">
						<text>已完成：</text>
						<text
							style="font-size: 43rpx;color: #27A25C;vertical-align: sub;word-break: break-all;">{{ formatMinutes(item.videoPosition) }}</text>
						<text>分钟</text>
					</view>
					<view class="label">
						<text>{{item.label}}</text>
						<up-icon name="arrow-right" color="#333333" size="28rpx" bold></up-icon>
					</view>
				</view>
				<up-empty mode="list" text="记录为空" v-if="report.length === 0"></up-empty>
			</view>
		</view>
		<view class="card" style="margin-bottom: 20rpx;" @click="showCode=true">
			<view class="label" style="display: flex;align-items: center;column-gap: 10rpx;">
				<up-icon name="server-fill" color="#0A9647" size="36rpx"></up-icon>
				<text>联系客服</text>
			</view>
			<up-icon name="arrow-right" color="#999" size="24rpx"></up-icon>
		</view>
		<view class="card">
			<text class="label">当前版本号：</text>
			<text class="value">V{{version}}</text>
		</view>
		<!-- <view class="achievement">
			<view class="title">
				<text>我的成就</text>
			</view>
			<view class="value">
				<view class="item" v-for="i in 5">
					<image class="icon" src="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"></image>
					<view class="text">
						<text>本周达标徽章</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class="nav animate__animated animate__fadeInUp">
			<view class="item" @click="changeNav(1)">
				<image :src="activeNav===1?'/static/a_home.png':'/static/home.png'" mode="scaleToFill"></image>
				<view :class="['bottomline',activeNav === 1? 'active' : '']"></view>
			</view>
			<view class="item" @click="changeNav(2)">
				<image :src="activeNav===2?'/static/a_user.png':'/static/user.png'" mode="scaleToFill"></image>
				<view :class="['bottomline',activeNav === 2? 'active' : '']"></view>
			</view>
		</view>
	</view>
	<up-overlay :show="showCode" @click="showCode = false">
		<view class="showCode" @click.stop="">
			<view style="margin-left: auto; margin-bottom: 20rpx;"><up-icon @click="showCode = false"  name="close-circle" size="26"></up-icon></view>
			<template v-for="item in codeData">
				<up-image :src="item.url" class="code" width="550rpx" height="550rpx"></up-image>
			</template>
			<view style="width: 550rpx;height: 550rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: #eee;">
				<up-icon name="photo-fill" color="#0A9647" size="88rpx"></up-icon>
				<text style="font-size: 26rpx;margin-top: 8rpx;">暂无二维码</text>
			</view>
			<view class="code-label">
				<up-icon name="server-fill" color="#0A9647" size="44rpx"></up-icon>
				<text>联系客服</text>
			</view>
		</view>
	</up-overlay>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import config from '@/config/index.js'
	import {
		checkLogin,
		weeklyApi,
		getCode
	} from '@/api/index.js'
	import { timeFormat } from '@/node_modules/uview-plus';
	let report = ref([]);
	let showCode=ref(false);
	let codeData=ref([]);
	let version=ref(uni.getAppBaseInfo().appVersion);
	// 当前时间戳（毫秒）
	const now = Date.now();
	// 七天前
	const sevenDaysAgo = now - 6 * 24 * 60 * 60 * 1000;

	const activeNav = ref(uni.getStorageSync('activeNav') || 2)
	if(activeNav.value !== 2) {
		uni.redirectTo({
			url:'/pages/main/index'
		})
	}
	const changeNav = (nav) => {
		activeNav.value = nav
		uni.setStorageSync('activeNav', nav)
		if (nav === 1) {
			uni.redirectTo({
				url: '/pages/main/index'
			})
		}
	}
	function jump() {
		toLogin();
	}
	
	// 查询最新的用户检测记录
	const visionData = ref({})
	const getNewRecord = () => {
		checkLogin().then(res => {
			if (!res.data) {
				uni.redirectTo({
					url: `/pages/tips/index`
				})
				 return
			}
			if(res.code === 200) {
				visionData.value = res.data
			}
		})
	}
	
	const weekly = () => {
		weeklyApi().then(res => {
			console.log(res);
			report.value = res.data || []
		})
	}
	
	const jumpDetail = (fileInfoId) => {
		uni.navigateTo({
			url:`/pages/planlist/index?id=${fileInfoId}`
		})
	}
	
	function formatMinutes(seconds) {
	  if (!seconds) return '0'
	  const minutes = seconds / 60
	  return minutes < 1 ? '<1' : minutes.toFixed(2)
	}

	function getQRcode(){
		getCode({
			objectType: 'service_qr_code'
		}).then((res)=>{
			codeData.value=res.data;
		}).catch((err)=>{
			
		})
	}
	
	const userInfo = ref({})
	onMounted(() => {
		userInfo.value = uni.getStorageSync('userInfo') || {}
		getNewRecord()
		weekly();
		getQRcode();
	})
</script>

<style lang="less" scoped>
	.showCode{
		width: fit-content;
		background-color: #fff;
		margin: 60% auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 16rpx;
		padding: 28rpx;
		box-sizing: border-box;
		.code-label{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			column-gap: 12rpx;
			font-size: 32rpx;
			letter-spacing: 1rpx;
			margin-top: 14rpx;
		}
	}
	.root {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-top: 51rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;
		.card {
			width: 627rpx;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0rpx 7rpx 20rpx 0rpx rgba(10, 150, 71, 0.15);
			border-radius: 18rpx;
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.label{
				font-size: 24rpx;
				letter-spacing: 1rpx;
				line-height: 32rpx;
				color: #000;
			}
			.value{
				font-size: 24rpx;
				letter-spacing: 1rpx;
				line-height: 32rpx;
				color: #999;
			}
		}
		.nav {
			position: fixed;
			width: 627rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 20rpx 0rpx rgba(10, 150, 71, 0.15);
			border-radius: 35rpx;
			left: 0;
			right: 0;
			bottom: 28rpx;
			margin: 0 auto;
			padding-top: 32rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				row-gap: 21rpx;

				image {
					width: 49rpx;
					height: 49rpx;
				}

				.bottomline {
					width: 86rpx;
					height: 9rpx;
					background: #fff;
					border-radius: 7rpx;
				}

				.active {
					background: #0A9647;
				}
			}
		}

		.header {
			width: 624rpx;
			padding: 21rpx 40rpx 40rpx 26rpx;
			box-sizing: border-box;
			background-color: #27A25C;
			border-radius: 37rpx;
			margin: 0 auto;
			margin-top: 80rpx;

			.top {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				column-gap: 23rpx;

				image {
					min-width: 109rpx;
					max-width: 109rpx;
					width: 109rpx;
					height: 109rpx;
					border-radius: 50%;
				}

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}

			.main {
				margin-top: 40rpx;

				.row {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;
					column-gap: 39rpx;

					.item {
						.title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #FFFFFF;
							letter-spacing: 1rpx;
							margin-bottom: 18rpx;
						}

						.info {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: flex-start;
							column-gap: 10rpx;
							.colume {
								flex: 1;
								text-align: center;

								.subtitle {
									font-family: PingFangSC, PingFang SC;
									font-weight: 600;
									font-size: 21rpx;
									color: #FFFFFF;
									letter-spacing: 1rpx;
									margin-bottom: 25rpx;
								}

								.num {
									font-weight: bold;
									font-size: 28rpx;
									color: #FFFFFF;
								}
							}
						}
					}

					.line {
						width: 2rpx;
						height: 74rpx;
						background-color: #fff;
						opacity: 0.51;
					}
				}
			}
		}

		.linkCard {
			width: 624rpx;
			padding: 51rpx 18rpx 63rpx 30rpx;
			background-color: #fff;
			border-radius: 28rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			margin: 67rpx auto 82rpx auto;
			box-sizing: border-box;

			.item {
				min-width: 147rpx;
				text-align: center;

				.icon {
					width: 88rpx;
					height: 88rpx;
					display: block;
					margin: 0 auto 25rpx auto;
				}

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 28rpx;
					color: #000000;
					letter-spacing: 2rpx;
				}
			}
		}

		.report {
			width: 624rpx;
			padding: 30rpx 21rpx 70rpx 23rpx;
			box-sizing: border-box;
			margin: 50rpx auto 37rpx auto;
			background-color: #fff;
			border-radius: 28rpx;

			.top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 28rpx;

				.left {
					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 28rpx;
						color: #000000;
						letter-spacing: 2rpx;
					}

					.tips {
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 18rpx;
						color: #0A9647;
						letter-spacing: 2rpx;
					}
				}

				.right {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;
					column-gap: 14rpx;

					.time {
						font-weight: bold;
						font-size: 21rpx;
						color: rgba(0, 0, 0, 0.49);
					}
				}
			}

			.list {
				display: flex;
				flex-direction: row;
				justify-content: center;
				// align-items: flex-start;
				flex-wrap: wrap;
				align-content: flex-start;
				row-gap: 28rpx;
				column-gap: 14rpx;

				.item {
					width: 283rpx;
					background: #F3F3F3;
					border-radius: 28rpx;
					padding: 58rpx 19rpx 54rpx 14rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					row-gap: 58rpx;

					.title {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 18rpx;
						color: #000000;
						letter-spacing: 2rpx;
					}

					.label {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 21rpx;
						color: #000000;
						letter-spacing: 2rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						width: 100%;
					}
				}
			}
		}

		.achievement {
			width: 624rpx;
			border-radius: 28rpx;
			background-color: #fff;
			margin: 37rpx auto 0 auto;
			padding: 30rpx 28rpx 46rpx 49rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
				letter-spacing: 2rpx;
				margin-bottom: 39rpx;
			}

			.value {
				display: grid;
				grid-template-columns: 152rpx 152rpx 152rpx;
				justify-content: space-between;
				align-items: flex-start;
				row-gap: 20rpx;

				.item {
					.icon {
						width: 152rpx;
						height: 152rpx;
						display: block;
						margin: 0 auto 9rpx auto;
					}

					.text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 18rpx;
						color: rgba(0, 0, 0, 0.36);
						letter-spacing: 2rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>